<template>
  <section class="f-real-name">
    <img class="f-return-img" src="@/assets/icons/return_btn_return.png" alt="" @click="goBack()">

    <section class="f-card">
      <p class="f-logo-name">{{ ispName[isp] }}</p>
      <p class="g-flex-ct f-mt-10">
        ICCID：{{ iccid }}
        <van-button class="f-ml-10" size="small" round @click="handleCopy(iccid)" style="padding: 2px 20px;">复制</van-button>
      </p>
      <p class="g-flex-ct f-mt-10">
        卡号：{{ msisdn }}
        <van-button class="f-ml-10" size="small" round @click="handleCopy(msisdn)" style="padding: 2px 20px;">复制</van-button>
      </p>

      <!-- <img class="f-logo" src="@/assets/imgs/lanmao_logo.png" alt=""> -->
      <!-- <p class="f-tips">请<span>点击</span>下方“复制链接”，<span>粘贴</span>到手机浏览器并打开，根据 页面提示进行实名认证。</p> -->
      <p class="f-tips">请<span>点击</span>下方<span class="f-bold">“去实名”</span>按钮，直接跳转打开。如无法直接跳转，可点击下方<span
          class="f-bold">“复制链接”</span>
        <span>粘贴</span>到手机浏览器并打开，根据页面提示进行实名认证。
      </p>
      <p class="f-url">{{ url }}</p>
      <section class="f-flex-between">
        <van-button round block @click="handleCopy(url)">复制链接</van-button>
        <van-button class="f-ml-30" round type="primary" block @click="toMiniProgram">去实名</van-button>
      </section>
    </section>
  </section>
</template>
    
<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router'
import { successDeal } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'

export default {
  setup() {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      url: route.query.url,
      isp: route.query.isp,
      iccid: route.query.iccid,
      msisdn: route.query.msisdn,
      ispName: {
        'unicom': '中国联通',
        'cmcc': '中国移动',
        'telecom': '中国电信',
        'cbn': '中国广电',
      },
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '',
        show: false,
      });
    })

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input)

      input.setAttribute('value', value);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const toMiniProgram = () => {
      if (state.isp == 'cbn' || state.isp == 'telecom') {
        openUrl()
        return
      }
      let xcxid = ''
      switch (state.isp) {
        case 'unicom': // 中国联通
          xcxid = 'gh_5eac63f4d504'
          break;
        case 'cmcc': // 中国移动
          xcxid = 'gh_e0002e2a3027'
          break;
        case 'telecom': // 中国电信
          xcxid = ''
          break;
      }
      const obj = {
        appid: 'wx8184c53144df49b0', // 自己微信平台上架的appid
        xcxid: xcxid, // 目标小程序id
        xcxPath: 'pages/index/index', // 目标小程序路径
        extraData: {},
      }
      JsBridge.callHandler('toXCX', obj, (res) => {
        console.log(res)
      })
    }

    const openUrl = () => {
      let url = ''
      switch (state.isp) {
        case 'cbn': // 中国广电
          url = 'https://cmp-miniapps.ctwing.cn/#/pages/ordinaryuserRealName/index'
          break;
        case 'telecom': // 中国电信
          url = 'https://cmp-miniapps.ctwing.cn/#/pages/ordinaryuserRealName/index'
          break;
      }
      JsBridge.callHandler('openUrl', url, (response) => {
        console.log('openUrl', response)
      })
    }

    const goBack = () => {
      router.go(-1),
        openUrl
    }

    return {
      ...toRefs(state),
      handleCopy,
      toMiniProgram,
      goBack
    }
  }
}
  </script>
    
<style lang="scss" scoped>
.f-real-name {
  background-image: url("@/assets/imgs/real_name.jpg");
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: relative;
  .f-return-img {
    position: fixed;
    width: 32px;
    top: 43px;
    left: 13px;
  }
  .f-logo-name {
    font-size: 18px;
  }
  .f-card {
    position: absolute;
    top: 242px;
    left: 22px;
    width: 327px;
    height: 419px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0px 2px 6px 0px rgba(134, 155, 198, 0.29),
      1px 3px 2px 0px rgba(255, 255, 255, 0.4),
      -2px -3px 2px 0px rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    padding: 20px 15px 36px 18px;
    .f-logo {
      width: 82px;
    }
    .f-tips {
      font-weight: 300;
      font-size: 12px;
      color: #000000;
      margin: 30px 0 20px 0;
      span {
        color: red;
      }
      .f-bold {
        color: #000000;
        font-weight: bold;
      }
    }
    .f-url {
      background: rgba(255, 255, 255, 0.8);
      border-radius: 3px;
      border: 1px solid #aaaaaa;
      font-weight: 300;
      font-size: 12px;
      color: #000000;
      padding: 15px 11px;
      line-height: 20px;
      margin-bottom: 50px;
      word-break: break-all; /* 在任意字符边界处断行 */
    }
  }
}
</style>